<template>
  <div >
    <div class="header">
      <input type="text" v-model="goodsData" placeholder="商品查询">
      <button @click="queryGoods">查询</button>
      <button @click="open">添加商品</button>
      <div v-if="dialog">
        <!-- 遮罩层 -->
        <div class="black" @click="close"></div> 
        <!-- 弹出层 -->
        <div class="dialog">
          <span style="color:#c69c6c;font-size:20px;">添加商品</span>
          <span @click="close" style="float:right;font-size:20px;"><i class="el-icon-close"></i></span>
          <br/><br/>
          <span>*</span>图片：
          <div style="display: inline-block;vertical-align: middle;">
            <div style="display:none;">
              <input type="file" id="upload" @change="showThumbnail($event)"/>
            </div>
            <label for="upload">
              <div class="upload">
                <div v-show="!goods.src" ><p>+</p></div>
                <div v-show="goods.src"><img :src="goods.src"/></div>
              </div>
            </label> 
          </div><br/>
          <span>*</span>标题：<input v-model="goods.title" type="text" placeholder="商品标题(名称)"><br/>
          <span>*</span>价格：<input v-model="goods.price" type="text" placeholder="商品价格(元)"><br/>
          <span>*</span>类型：<select v-model="goods.type">
            <option value="none" disabled hidden>请选择类型！</option> 
            <option value="古装">古装</option>
            <option value="女装">女装</option>
            <option value="裙子">裙子</option>
            <option value="衬衫">衬衫</option>
          </select><br/>
          
          <button @click="close" style="background:white;border:1px solid #c69c6c;color:#c69c6c;">取消</button>
          <button @click="addGoods">添加</button>
      </div>

  </div>
    </div>
    <div class="main">
      <el-table
        :data="mains" border size='mini'  style="width: 100%;">
        <el-table-column prop="goods_id" label="id" width="80"></el-table-column>
        <el-table-column prop="goods_title" label="标题" width="280"></el-table-column>
        <el-table-column prop="goods_url" label="图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.goods_url">
          </template>
        </el-table-column>
        <el-table-column prop="goods_price" label="价格（￥）" width="120"></el-table-column>
        <el-table-column prop="goods_type" label="类型" width="80"></el-table-column>
        <el-table-column prop="goods_time" label="时间" width="180"></el-table-column>
        <el-table-column label="操作" width="240">
          <button @click="editGoods">编辑</button>
          <button @click="deleteGoods" style="margin-left:10px;background:#E64347;">删除</button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {reqGoodsAdmin,reqGoodsUpload} from '../../../api'
export default {
  name:'goods',
  data() {
    return {
      goods:{src:'',type:"none",title:"",price:""},
      file:'', //文件信息
      dialog:false,
      goodsData:'', //商品查询输入框的数据
      mains:[] //用于接收请求的数据
    }
  },
  methods:{
    editGoods(){
      this.$message.warning("开发中，敬请期待！")
    },
    deleteGoods(){
      this.$message.info("开发中，敬请期待！")
    },
    async addGoods(){
      if(this.goods.src && this.goods.type !== 'none'){
        let formData = new FormData()
        formData.append('file',this.file)
        formData.append('title',this.goods.title)
        formData.append('price',this.goods.price)
        formData.append('type',this.goods.type)
        let upload = await reqGoodsUpload(formData)
        if(upload.state === 'suc'){
          this.$message.success('商品添加成功！')
          this.close()
        }else{
          this.$message.error('商品添加失败！')
        }
      }else{
        this.$message.warning('有必填项未填写！')
      }
    },
    queryGoods(){
      this.$message.success("开发中,敬请期待！")
    },
    open(){
      this.dialog = true
    },
    close(){
      this.goods = {src:'',type:"none",title:"",price:""}
      this.dialog = false
    },
    showThumbnail(e){ //显示缩略图
      this.file = e.target.files[0]
      const reader = new FileReader();
      reader.readAsDataURL(this.file);
      let _this = this
      reader.onload = function () {
        _this.goods.src = this.result; //显示缩略图
      };
    },
  },
  async mounted() {
    this.mains = await reqGoodsAdmin();
  },
}
</script>

<style scoped>
/* 文件上传 */
#upload{
  width: 100%;
}
.upload {
  cursor: pointer;
  width: 120px;
  height: 120px;
  margin-left: 5px;
}
.upload>div{
    width: 100%;
    height: 100%;
    border: 1px dashed #606266;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ccc;
    position: relative;
    overflow: hidden;
}
.upload>div>div{
  position: absolute;
  margin: 0 auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.upload>div:hover{
  border: 1px dashed #c69c6c;
}
.upload>div>p{
    font-size: 50px;
    color: #c69c6c;
}
.upload>div>img{
    width: 100%;
    border-radius: 4px;
}
/* 弹出层 */
  .black{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0.5;
    top: 0;
    left: 0;
    background: #000000;
  }
  .dialog{
    color:#606266;
    font-size: 14px;
    font-family: "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimSun", "sans-serif";
    position: fixed;
    width: 480px;
    z-index: 1000;
    background: #ffffff;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    padding: 15px;
    margin: -160px 0 0 -240px;
    /* 0.4s完成transform移动效果*/
    transition: transform 0.2s linear 0s;
    transition: all 2s;
  }
  .dialog input,.dialog select{
    height: 40px;
    width: 332px;
    margin-top: 16px;
  }
  .dialog > span:nth-last-of-type(n+1){
    color: red;
    vertical-align: middle;
  }
  select{
    margin-left: 10px;
    border: 1px solid white;
    background: #F8F6F6;
  }
  select:focus{
    border: 1px solid #c69c6c;
  }
  .header{
    background: white;
    padding: 8px 0;
  }
  .main{
    background: white;
    margin-top: 10px;
    padding:10px;
  }
  input{
    background: rgb(248, 246, 246);
    height: 30px;
    max-width: 320px;
    margin-left: 10px;
    padding-left: 10px;
  }
  .header button{
    height: 30px;
    margin-left: 8px;
  }
  .dialog button{
    margin-top: 16px;
    font-size: 14px;
    height: 36px;
    width: 60px;
  }
</style>